<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
            width: 350px;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            background: #f8f9fa;
        }
        
        .header {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .title {
            font-size: 18px;
            font-weight: 600;
            color: #1a73e8;
            margin: 0;
        }
        
        .subtitle {
            font-size: 12px;
            color: #5f6368;
            margin: 5px 0 0 0;
        }
        
        .status {
            background: #e8f0fe;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .status-text {
            font-size: 14px;
            margin: 0;
            color: #1967d2;
        }
        
        .table-count {
            font-weight: 600;
            color: #137333;
        }
        
        .buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .btn {
            padding: 12px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }
        
        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn-csv {
            background: #34a853;
            color: white;
        }
        
        .btn-csv:hover {
            background: #2e8b47;
        }
        
        .btn-excel {
            background: #1a73e8;
            color: white;
        }
        
        .btn-excel:hover {
            background: #1557b0;
        }
        
        .btn:disabled {
            background: #dadce0;
            color: #9aa0a6;
            cursor: not-allowed;
            transform: none;
        }
        
        .btn:disabled:hover {
            transform: none;
            box-shadow: none;
        }
        
        .error {
            background: #fce8e6;
            color: #d33b2c;
            padding: 12px;
            border-radius: 6px;
            font-size: 13px;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 10px;
        }
        
        .spinner {
            border: 2px solid #f3f3f3;
            border-top: 2px solid #1a73e8;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .table-selector {
            margin-bottom: 15px;
        }
        
        .table-selector label {
            display: block;
            font-size: 13px;
            color: #3c4043;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .table-selector select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #dadce0;
            border-radius: 4px;
            font-size: 14px;
            background: white;
        }
        
        .pagination-option {
            margin-top: 10px;
            padding: 10px;
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 4px;
            display: none;
        }
        
        .pagination-option.show {
            display: block;
        }
        
        .pagination-option label {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #856404;
            margin: 0;
        }
        
        .pagination-option input[type="checkbox"] {
            margin-right: 8px;
        }
        
        .progress-container {
            margin: 15px 0;
            display: none;
        }
        
        .progress-container.show {
            display: block;
        }
        
        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 8px;
        }
        
        .progress-fill {
            height: 100%;
            background: #4caf50;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .progress-text {
            font-size: 12px;
            color: #666;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1 class="title">Table Exporter</h1>
        <p class="subtitle">导出网页表格为CSV或Excel</p>
    </div>
    
    <div id="loading" class="loading">
        <div class="spinner"></div>
        <div>正在扫描表格...</div>
    </div>
    
    <div id="error" class="error" style="display: none;"></div>
    
    <div id="status" class="status" style="display: none;">
        <p class="status-text">
            找到 <span id="tableCount" class="table-count">0</span> 个表格
        </p>
    </div>
    
    <div id="tableSelector" class="table-selector" style="display: none;">
        <label for="tableSelect">选择要导出的表格：</label>
        <select id="tableSelect">
            <option value="all">所有表格</option>
        </select>
        
        <div id="paginationOption" class="pagination-option">
            <label>
                <input type="checkbox" id="collectAllPages">
                🔄 收集所有分页数据（可能需要较长时间）
            </label>
        </div>
    </div>
    
    <div id="progressContainer" class="progress-container">
        <div class="progress-bar">
            <div id="progressFill" class="progress-fill"></div>
        </div>
        <div id="progressText" class="progress-text">正在收集分页数据...</div>
    </div>
    
    <div id="buttons" class="buttons" style="display: none;">
        <button id="exportCsv" class="btn btn-csv">
            📄 导出为 CSV
        </button>
        <button id="exportExcel" class="btn btn-excel">
            📊 导出为 Excel
        </button>
    </div>
    
    <script src="popup.js"></script>
</body>
</html>